<template>
  <div v-if="!item.hidden">
    <!-- 如果只有一个子路由且不是嵌套菜单 -->
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <el-icon v-if="onlyOneChild.meta.icon"><component :is="onlyOneChild.meta.icon" /></el-icon>
          <template #title>
            <span>{{ onlyOneChild.meta.title }}</span>
          </template>
        </el-menu-item>
      </app-link>
    </template>
    
    <!-- 如果有子路由或者设置了alwaysShow -->
    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template #title>
        <el-icon v-if="item.meta && item.meta.icon"><component :is="item.meta.icon" /></el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import path from 'path-browserify'
import AppLink from './AppLink.vue'

// 定义props
const props = defineProps({
  // 菜单项
  item: {
    type: Object,
    required: true
  },
  // 是否是嵌套菜单
  isNest: {
    type: Boolean,
    default: false
  },
  // 基础路径
  basePath: {
    type: String,
    default: ''
  }
})

// 当只有一个子路由时要显示的子路由
const onlyOneChild = reactive({})

/**
 * 判断是否只有一个可显示的子路由
 * @param {Array} children - 子路由数组
 * @param {Object} parent - 父路由对象
 * @returns {boolean} - 是否只有一个可显示的子路由
 */
const hasOneShowingChild = (children = [], parent) => {
  const showingChildren = children.filter(item => {
    if (item.hidden) {
      return false
    } else {
      // 临时设置
      Object.assign(onlyOneChild, item)
      return true
    }
  })

  // 没有子路由时直接显示父路由
  if (showingChildren.length === 0) {
    Object.assign(onlyOneChild, { ...parent, path: '', noShowingChildren: true })
    return true
  }

  // 只有一个子路由时
  if (showingChildren.length === 1) {
    return true
  }

  // 有多个子路由时，不满足条件
  Object.assign(onlyOneChild, { path: '', meta: { title: '更多' } })
  return false
}

/**
 * 解析路径
 * @param {string} routePath - 路由路径
 * @returns {string} - 解析后的完整路径
 */
const resolvePath = (routePath) => {
  if (/^(https?:|mailto:|tel:)/.test(routePath)) {
    return routePath
  }
  
  return path.resolve(props.basePath, routePath)
}
</script>

<style scoped>
.el-menu-item, .el-sub-menu {
  text-align: left;
}

.submenu-title-noDropdown {
  padding-left: 20px !important;
}

.el-sub-menu__title {
  padding-left: 20px !important;
}

.el-menu-item.is-active {
  background-color: #263445 !important;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #263445 !important;
}

.el-sub-menu.is-active > .el-sub-menu__title {
  color: #f4f4f5 !important;
}

.el-icon {
  margin-right: 5px;
  width: 16px;
  height: 16px;
}
</style> 